<template>
    <sxTable :tableData="tableData" 
    :tableLoading="tableLoading"
    :columns="columns" align="center">
        <!-- 头像显示 -->
        <template v-slot:imageUrl='{row}'>
            <!-- <el-avatar shape="square" :src="row.imageUrl"></el-avatar> -->
            <img :src="row.imageUrl" width="100">
        </template>
        <template v-slot:action="{row}">
            <!-- 自定义图标 -->
            <el-button type="success" >
                <template #icon>
                    <i class="iconfont icon-vip3"></i>
                </template>
                <!-- 自定义语法 -->
                <template #default>
                    点击充值
                </template>
            </el-button>
        </template>
    </sxTable>
</template>
<script setup>
import sxTable from '@/components/sxTable/index.vue'
// 引入发送请求的方法
import * as api from '@/api/pay'
import {ref} from 'vue'
// 动态定义表头

let columns = [
    {
        label:'产品图片',
        prop:'imageUrl',
    },
    {
        label:'产品名称',
        prop:'productName'
    },
    {
        label:'产品描述',
        prop:'description'
    },
    {
        label:'价格(元)',
        prop:'price'
    },
    {
        label:'库存',
        prop:'inventory'
    },
    {
        label:'充值',
        prop:'action'
    },
]

// 声明一个数据，用于注入给表格

let tableData = ref([])

// 声明控制加载动画的变量
let tableLoading = ref(false)

// 获取产品
let getList = async () => {
    tableLoading.value = true
    try {
        let res = await api.getCategoryApi()
        // console.log(res)
        tableData.value = res.data.data.reverse()
        tableLoading.value = false
    } catch(e){
        console.log(e)
        tableLoading.value = false
    }
}
getList()

</script>
<script>
    export default {
        meta:{
            title: 'vipCharge',
            name: 'vip充值',
            routeName:'vipCharge',
            icon:'icon-chongzhi'
        }
    }
</script>